<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - AI智能改写</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="js/uni.webview.js"></script>
    <style>
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        .register-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .register-form {
            width: 100%;
            max-width: 460px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app" class="register-container">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-md w-full">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <a href="index.html" class="text-2xl font-bold gradient-text">AI智能改写</a>
                        </div>
                        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                            <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</a>
                            <a href="main.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">开始使用</a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 注册区域 -->
        <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
            <div class="register-form p-8 bg-white rounded-lg shadow-lg">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold gradient-text">创建账户</h2>
                    <p class="text-gray-500 mt-2">注册账户，获得免费Token体验降重服务</p>
                </div>
                
                <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-position="top">
                    <el-form-item label="用户名" prop="username">
                        <el-input
                            v-model="registerForm.username"
                            placeholder="请输入用户名"
                        >
                            <template #prefix>
                                <i class="fas fa-user text-gray-400"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item label="邮箱" prop="email" class="mt-4">
                        <el-input
                            v-model="registerForm.email"
                            placeholder="请输入电子邮箱"
                        >
                            <template #prefix>
                                <i class="fas fa-envelope text-gray-400"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <el-form-item label="密码" prop="password">
                            <el-input
                                v-model="registerForm.password"
                                placeholder="请输入密码"
                                type="password"
                                show-password
                            >
                                <template #prefix>
                                    <i class="fas fa-lock text-gray-400"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input
                                v-model="registerForm.confirmPassword"
                                placeholder="请再次输入密码"
                                type="password"
                                show-password
                            >
                                <template #prefix>
                                    <i class="fas fa-lock text-gray-400"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                    
                    <el-form-item label="验证码" prop="captcha" class="mt-4">
                        <div class="flex">
                            <el-input
                                v-model="registerForm.captcha"
                                placeholder="请输入验证码"
                                class="flex-1 mr-2"
                            ></el-input>
                            <div class="w-32 h-10 bg-gray-200 flex items-center justify-center text-gray-500 text-xs">
                                验证码图片
                            </div>
                        </div>
                    </el-form-item>
                    
                    <div class="flex items-center mt-4">
                        <el-checkbox v-model="agreeTerms">我已阅读并同意</el-checkbox>
                        <a href="#" class="ml-1 text-sm text-indigo-600 hover:text-indigo-800">服务条款</a>
                        <span class="mx-1 text-gray-500">和</span>
                        <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">隐私政策</a>
                    </div>
                    
                    <el-button type="primary" class="w-full mt-6 gradient-bg" @click="handleRegister" :disabled="!agreeTerms">注册账户</el-button>
                    
                    <div class="mt-6 flex items-center justify-center">
                        <span class="text-gray-500 text-sm">已有账户?</span>
                        <a href="login.html" class="ml-1 text-sm text-indigo-600 hover:text-indigo-800">立即登录</a>
                    </div>
                </el-form>
                
                <div class="mt-8 pt-6 border-t border-gray-200">
                    <p class="text-center text-sm text-gray-500 mb-4">其他方式注册</p>
                    <div class="flex justify-center space-x-6">
                        <a href="#" class="text-gray-400 hover:text-gray-600">
                            <i class="fab fa-weixin text-2xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-600">
                            <i class="fab fa-qq text-2xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gray-600">
                            <i class="fab fa-weibo text-2xl"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <p class="text-center text-sm text-gray-500">
                    &copy; 2023 AI智能改写. 保留所有权利.
                </p>
            </div>
        </footer>
    </div>

    <script>
        const { createApp, ref, reactive } = Vue;
        
        const app = createApp({
            setup() {
                const registerForm = reactive({
                    username: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    captcha: ''
                });
                
                const validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        if (registerForm.confirmPassword !== '') {
                            // 对第二个密码框单独验证
                            if (value !== registerForm.confirmPassword) {
                                callback(new Error('两次输入密码不一致!'));
                            }
                        }
                        callback();
                    }
                };
                
                const validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== registerForm.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                
                const registerRules = {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                };
                
                const agreeTerms = ref(false);
                
                const handleRegister = () => {
                    console.log('注册信息', registerForm, agreeTerms.value);
                    // 实际应用中，这里会有注册逻辑
                    window.location.href = 'main.html';
                };
                
                return {
                    registerForm,
                    registerRules,
                    agreeTerms,
                    handleRegister
                };
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 